import React, { Component } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Spin, Icon } from 'antd';
import styles from './echartStyle.less';

class RadarChart extends Component {
  static propTypes = {
    // secu_code: PropTypes.string.isRequired,
    // type: PropTypes.string,
    chartID: PropTypes.string,
    // industryRank: PropTypes.string,
  };

  state = {
    tipVB: false,
    tipX: '20px',
    tipY: '20px',
    tipContent: 'this is content',
  };

  static defaultProps = {
    chartID: '',
    stock_code: '',
  };

  componentDidMount() {
    const { dispatch, chartID } = this.props;

    dispatch({
      type: 'home/getHrdt',
      chartID: chartID,
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code,
      },
    });
  }

  transferTip(tipVB) {
    this.setState({
      tipVB,
    });
  }

  render() {
    const { chartID, score, Industry_rank, score_flag, loading } = this.props;
    return (
      <Spin tip="数据读取中..." spinning={loading}>
        <div>
          <div id={chartID} className={styles.radarContainer} />
          <div
            id="leida-top"
            className={styles.radarTip}
            style={{ display: 'none', top: `${this.state.tipX}`, left: `${this.state.tipY}` }}
            ref="radarTip"
          >
            {this.state.tipContent}
          </div>
          {/* { this.state.tipVB && } */}
          <div className={styles.homeMiddleBottom}>
            <div className={styles.homeMidList}>
              <p className={styles.homeMidTitle}>综合评分</p>
              <p className={styles.goldtext}>
                <span style={{ marginRight: '5px' }}>{score}</span>
                <span>{score_flag === 'up' && <img src={require('./images/up-new.png')} />}</span>
                <span>{score_flag === 'down' && <img src={require('./images/down.png')} />}</span>
                <span>{score_flag === '-' && '--'}</span>
              </p>
            </div>
            <div className={styles.homeMidList}>
              <p className={styles.homeMidTitle}>击败同行业公司</p>
              <p className={styles.goldtext}>{Industry_rank}</p>
            </div>
          </div>
        </div>
      </Spin>
    );
  }
}

const mapStateToProps = state => ({
  loading: state.loading.effects['home/getHrdt'],
  score: state.home.radarChart ? state.home.radarChart.complex.score : '0',
  Industry_rank: state.home.radarChart ? state.home.radarChart.complex.industry_rank : '0%',
  score_flag: state.home.radarChart.complex.score_flag
    ? state.home.radarChart.complex.score_flag
    : '-',
});
// ,console.log("radarChart=========", state.home.radarChart)

export default connect(mapStateToProps)(RadarChart);
